@import "../../sassmixins/mixins";

html {
  @include square(100%);
  //overflow: hidden;
}

body {
  height: 100%;
  width: 10rem;
  .outer {
    font-size: 1rem;

    background-image: url("../image/bg.jpg");
    background-size: 100% 100%;
    min-height: 100%;
    overflow: hidden;
    width: 10em;
    position: relative;
    min-width: 10rem;
    .container {
      background-image: url("../image/all.png");
      background-size: 100% 100%;
      @include size(px2em(750px), px2em(1206px));
      @include center-block;
      position: relative;

      .buycart {
        background-image: url("../image/buycart-no.png");
        background-size: 100% 100%;
        @include size(px2em(429px), px2em(402px));
        position: absolute;
        top: px2em(461px);
        left: px2em(210px);
      }

      .rule {
        background-image: url("../image/rule-icon.png");
        background-size: 100% 100%;
        @include size(px2em(185px), px2em(166px));
        position: absolute;
        top: 0;
        left: 0;
      }

      .share {
        background-image: url("../image/btn.png");
        background-size: 100% 100%;
        @include size(px2em(372px), px2em(92px));
        position: absolute;
        left: px2em(196px);
        bottom: px2em(25px);
        z-index: 10;
      }

      .click-area {
        background-image: url("../image/click-word.png");
        background-size: 100% 100%;
        @include size(px2em(287px), px2em(46px));
        position: absolute;
        left: 5em - px2em(143px);
        bottom: 0;
        z-index: 11;
      }
    }
  }

}

.dialog {
  background-image: url("../image/share-bg.png");
  position: fixed;
  z-index: 9;
  @include square(100%);
  top: 0;
  left: 0;
  display: none;

  .tip {
    background-image: url("../image/share-word.png");
    background-size: 100% 100%;
    @include size(px2rem(283px), px2rem(295px));
    position: absolute;
    top: 0;
    right: 0;
  }
}